import { useMemo } from 'react';
import { Drawer, Button, Image } from 'antd';
import loadable from '@loadable/component';

import useDevice, { DEVICES } from '@/hooks/useDevice';
import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));

/**
 * MerchDetail 画廊预览，仅移动端展示
 */
export default ({ items = [], open = false, onOpenChange }) => {
    const isMobile = useDevice() === DEVICES.MOBILE;
    const list = useMemo(() => (Array.isArray(items) ? items.filter(Boolean) : []), [items]);

    // 非移动端不渲染
    if (!isMobile) return null;

    const handleClose = () => onOpenChange?.(false);

    return (
        <Drawer
            open={open}
            title={null}
            footer={null}
            closeIcon={null}
            placement="right"
            height={'100%'}
            width={'100%'}
            maskClosable={true}
            destroyOnHidden={true}
            onClose={handleClose}
            className={styles['drawer']}
        >
            <div className={styles['header']}>
                <Button className={styles['close']} size="small" shape="circle" type="primary" onClick={handleClose} icon={<IconFont name="icon-arrow2-right-copy"/>}></Button>
                <div className={styles['title']}>查看图片</div>
            </div>

            <div className={styles['body']}>
                <div className={styles['grid']}>
                    {list.map((src, i) => (
                        <div key={i} className={styles['item']}>
                            <Image
                                src={`${src}?x-oss-process=image/resize,w_256/quality,q_80`}
                                placeholder={
                                    <img
                                        src={`${src}?x-oss-process=image/resize,w_64/quality,q_20`}
                                        decoding="async"
                                    />
                                }
                            />
                        </div>
                    ))}
                </div>
            </div>
        </Drawer>
    );
}
